<template>
    <PlayGround v-if="$store.state.pk.status === 'playing'" />
    <MatchGround v-if="$store.state.pk.status === 'matching'" />
    <ResultBoard v-if="$store.state.pk.loser != 'none'" />
  <div class="user-color" v-if="$store.state.pk.status === 'playing'">
    <div v-if="parseInt($store.state.user.id) === parseInt($store.state.pk.a_id)">
      <p>你是  黑子</p>
      <p>玩家  {{$store.state.pk.opponent_username}} 白子</p>
      <p>黑子玩家先手</p>
    </div>
    <div v-if="parseInt($store.state.user.id) === parseInt($store.state.pk.b_id)">
      <p>你是 白子</p>
      <p>玩家  {{$store.state.pk.opponent_username}} 黑子</p>
      <p>黑子玩家先手</p>
    </div>
  </div>

</template>

<style>
.user-color {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 50px; /* 向下移动 10px */
}
</style>

<script>
import PlayGround from '../../components/PlayGround.vue'
import MatchGround from '../../components/MatchGround.vue'
import ResultBoard from '../../components/ResultBoard.vue'
import { onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import {drawPiece,drawPieceAuto, Vars} from "@/assets/scripts/gameStup";

export default {
    components: {
        PlayGround,
        MatchGround,
        ResultBoard,
    },
    setup() {
        const store = useStore();
        const socketUrl = `ws://127.0.0.1:3000/websocket/${store.state.user.token}/`;

        store.commit("updateLoser", "none");
        store.commit("updateIsRecord", false);

        let socket = null;
        onMounted(() => {
            store.commit("updateOpponent", {
                username: "我的对手",
                photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
            })
            socket = new WebSocket(socketUrl);

            socket.onopen = () => {
                console.log("connected!");
                store.commit("updateSocket", socket);
            }

            socket.onmessage = msg => {
                const data = JSON.parse(msg.data);
                console.log('socket.onmessage.data',data)
                if (data.event === "start-matching") {  // 匹配成功
                  Vars.isBlack = data.isBlack;
                  Vars.IDa = data.game.a_id;
                  Vars.IDb = data.game.b_id;
                  Vars.MyID =data.opponent_id;
                  Vars.isBot =data.isBot;
                 
                    if (Vars.isBlack){
                      Vars.currentPlayer = Vars.MyID;
                    }else {
                      if (Vars.MyID == Vars.IDa){
                        Vars.currentPlayer = Vars.IDb;
                      }else {
                        Vars.currentPlayer = Vars.IDa;
                      }
                    }
                    store.commit("updateOpponent", {
                        username: data.opponent_username,
                        photo: data.opponent_photo,
                    });
                    setTimeout(() => {
                        store.commit("updateStatus", "playing");
                    }, 200);
                    store.commit("updateGame", data.game);
                  setTimeout(() => {
                    if(Vars.isBot&&Vars.currentPlayer==Vars.MyID){
                      drawPieceAuto();
                    }
                  }, 300);
                } else if (data.event === "move") {
                    console.log(data);
                   
                      // 切换玩家
                      if (Vars.currentPlayer==Vars.IDa){
                        Vars.currentPlayer = Vars.IDb;
                      }else {
                        Vars.currentPlayer = Vars.IDa;
                      }
                      drawPiece(data.x,data.y,data.isBlack);
                      if(Vars.isBot&&Vars.currentPlayer==Vars.MyID){
                        drawPieceAuto();
                      }
                } else if (data.event === "result") {
                    store.commit("updateLoser", data.loser);
                }
            }

            socket.onclose = () => {
                console.log("disconnected!");
            }
        });

        onUnmounted(() => {
            socket.close();
            store.commit("updateStatus", "matching");
        })
    }
}
</script>

<style scoped>
div.user-color {
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: 600;
}
</style>